<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/module/plugins/swiper/swiper.min.css" media="all">
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #fff;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }
        .swiper-slide {
            background-position: center;
            background-size: 480px 480px;
            background-repeat: no-repeat;
        }
        .gallery-top {
            height: 80%;
            width: 100%;
        }
        .gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
        }
        .gallery-thumbs .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.4;
            background-size: 100px 100px;
        }
        .gallery-thumbs .swiper-slide-active {
            opacity: 1;
        }

    </style>
</head>
<body>
<div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
    </div>
</div>
</body>
<script src="/plugins/common.js"></script>
<script src="/plugins/jquery-1.8.3.min.js"></script>
<script src="/module/plugins/swiper/swiper.min.js"></script>
<script>
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

    if(urlParam("images")){
        var images = urlParam("images").split(",");
        var html = "";
        for(var i=0;i<images.length;i++){
            html += "<div class=\"swiper-slide\" style=\"background-image:url("+images[i]+")\"></div>";
        }
        $(".swiper-wrapper").html("");
        $(".swiper-wrapper").html(html);
    }

    //地址栏参数
    function urlParam(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)	return unescape(r[2]);
        return null;
    }
</script>

</html>